<template>
    <div class="wraps">
        <div
            class="items"
            v-for="item in watList"
            :style="{height: item.height + 'px', left: item.left + 'px', top: item.top + 'px', background: item.background}">
        </div>
    </div>
</template>
<script setup lang="ts">
import {reactive, onMounted} from "vue";

const props = withDefaults(defineProps<{
    list: any[]
}>(), {
    list: () => []
})
const watList = reactive<any []>([])

const init = () => {
    console.log('this.')
    const width = 130
    const winx = document.documentElement.clientWidth
    const col = Math.floor(winx / width)
    const heightList: number[] = []
    for (let i = 0; i < props.list.length; i++) {
        if (i < col) {
            props.list[i].left = i * width
            props.list[i].top = 20
            watList.push(props.list[i])
            heightList.push(props.list[i].height)
        } else {
            let current = heightList[0]
            let index = 0
            heightList.forEach((h, j) => {
                if (current > h ) {
                    current = h
                    index = j
                }
            })
            props.list[i].top = current + 20
            props.list[i].left = index * width
            heightList[index] = heightList[index] + props.list[i].height + 20
            watList.push(props.list[i])
        }
    }
}

onMounted(() => {
    init()
})

</script>

<style scoped lang="scss">

.wraps {
    position: relative;
    height: 100%;

    .items {
        position: absolute;
        width: 120px;
    }
}
</style>
